<template>
  <div class="msg-table__box">
    <LJTable
      msg="信息"
      :column="msgColumn"
      :data="msgData"
      @handleBtnClick="handleBtnClick"
    />
    <div class="center mt-30">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="回复"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>内容: <el-input v-model="answerMsg" /></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose('success')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import { column } from "./local-data";
import LJTable from "@/components/LJTable";
import { query, del, createAnswer } from "../../network/api/msg";
import { ElMessage } from "element-plus";
export default {
  components: {
    LJTable,
  },
  setup() {
    const msgColumn = ref(column);
    const msgData = ref(null);
    const pageSize = ref(5);
    const currentPage = ref(1);
    const count = ref(null);
    const answerMsg = ref(null);
    const answerId = ref(null);
    const dialogVisible = ref(false);
    const getMsgData = (
      params = { pageSize: pageSize.value, currentPage: currentPage.value }
    ) => {
      query(params).then((res) => {
        msgData.value = res.result.data;
        count.value = res.result.count;
      });
    };
    const handleBtnClick = (data) => {
      if (data.info === "delete") {
        del({ id: data.row.id }).then((res) => {
          getMsgData();
          ElMessage.success(res.msg);
        });
      }
      if (data.info === "change") {
        answerId.value = data.row.id;
        dialogVisible.value = true;
        answerMsg.value = data.row.answer;
      }
    };
    const handleSizeChange = (val) => {
      pageSize.value = val;
      getMsgData({ pageSize: val, currentPage: currentPage.value });
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      getMsgData({ pageSize: pageSize.value, currentPage: val });
    };
    const handleClose = (info) => {
      if (info === "success") {
        createAnswer({ id: answerId.value, answer: answerMsg.value }).then(
          (res) => {
            if (res.status === 200) {
              getMsgData();
              ElMessage.success(res.msg);
            }
          }
        );
      }
      dialogVisible.value = false;
    };
    getMsgData();
    return {
      msgColumn,
      msgData,
      count,
      answerMsg,
      dialogVisible,
      pageSize,
      currentPage,
      handleClose,
      handleBtnClick,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
.msg-table__box {
  margin-top: 50px;
  margin-left: 70px;
}
.mt-30 {
  margin-top: 30px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>